<template>
    <el-scrollbar>
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" text-color="#fff"
            :default-active="onRoutes" :router="true" :collapse="isCollapse">
            <template v-for="(item, index) in menuItems" :key="index">

                <el-sub-menu v-if="item.children !== null" :index="item.name">
                    <template #title>
                        <el-icon>
                            <IconMenu />
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <!-- <template v-for="(etem,index) in item" :key="index">
                    <el-menu-item
					  v-if="etem.children===null" 
					  :index="etem.frontUrl">
					  <span>{{ etem.name }}</span>

				    </el-menu-item>
                </template> -->

                    <template v-if="item.children[0].children !== null">
                        <el-sub-menu v-for="(child_item, child_index) in item.children" :index="child_item.name"
                            :key="child_index">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>{{ child_item.name }}</span>
                            </template>
                            <el-menu-item v-for="(citem, cindex) in child_item.children" :key="cindex"
                                :index="citem.frontUrl">
                                <el-icon>
                                    <User />
                                </el-icon>
                                {{ citem.name }}
                            </el-menu-item>
                        </el-sub-menu>
                    </template>
                    <template v-else>
                        <el-menu-item v-for="(child_item, child_index) in item.children" :key="child_index"
                            :index="child_item.frontUrl">
                            <el-icon>
                                <User />
                            </el-icon>
                            {{ child_item.name }}
                        </el-menu-item>
                    </template>
                </el-sub-menu>
                <el-menu-item v-else :index="item.frontUrl">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </template>

            <!--       <el-sub-menu index="/user">
        <template #title>
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/user">
          <el-icon><icon-menu /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/user/role">
          <el-icon><Postcard /></el-icon>
          <span>角色管理</span>
        </el-menu-item>
        <el-menu-item index="/user/resource">
          <el-icon><MessageBox /></el-icon>
          <span>权限管理</span>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/basis">
        <el-icon><icon-menu /></el-icon>
        <span>政策文件与基础数据</span>
      </el-menu-item>
      <el-sub-menu index="/invest">
        <template #title>
          <el-icon><Histogram /></el-icon>
          <span>投资评价</span>
        </template>
        <el-sub-menu index="/general">
          <template #title>
            <el-icon><icon-menu /></el-icon>
            <span>一般项目投资评价</span>
          </template>
          <el-menu-item index="/general">
            <el-icon><icon-menu /></el-icon>
            <span>项目管理</span>
          </el-menu-item>
          <el-menu-item index="/general">
            <el-icon><icon-menu /></el-icon>
            <span>方案管理</span>
          </el-menu-item>
          <el-menu-item index="/asdfasfdsaf">
            <el-icon><icon-menu /></el-icon>
            <span>方案比选</span>
          </el-menu-item>
          <el-menu-item index="/asdfasfdsaf">
            <el-icon><icon-menu /></el-icon>
            <span>生成报告</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/infrastructure">
          <template #title>
            <el-icon><icon-menu /></el-icon>
            <span>基建项目投资评价</span>
          </template>
          <el-menu-item index="/infrastructure">
            <el-icon><icon-menu /></el-icon>
            <span>项目管理</span>
          </el-menu-item>
          <el-menu-item index="/infrastructure/solution">
            <el-icon><icon-menu /></el-icon>
            <span>方案设计</span>
          </el-menu-item>
          <el-menu-item index="/infrastructure/compare">
            <el-icon><icon-menu /></el-icon>
            <span>方案比选</span>
          </el-menu-item>
          <el-menu-item index="/infrastructure/report">
            <el-icon><icon-menu /></el-icon>
            <span>生成报告</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/equipment">
          <el-icon><icon-menu /></el-icon>
          <span>装备购置投资评价</span>
        </el-menu-item>
        <el-menu-item index="/repair">
          <el-icon><icon-menu /></el-icon>
          <span>大修资本化投资评价 </span>
        </el-menu-item>
        <el-menu-item index="/update">
          <el-icon><icon-menu /></el-icon>
          <span>更新改造项目投资评价 </span>
        </el-menu-item>
      </el-sub-menu> -->
        </el-menu>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { ref, defineExpose, computed } from "vue";
import {
    Menu as IconMenu,
    Setting,
    Document,
    Histogram,
    User,
    MessageBox,
    Postcard,
} from "@element-plus/icons-vue";
import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
console.log(store.state.token)
console.log(store.state.passwd)  // store 实例对象
const menuItems = store.state.menu
console.log(menuItems)
const isCollapse = ref(false);
function collapsechange() {
    isCollapse.value = !isCollapse.value;
}

// 路由传参
const route = useRoute();
const onRoutes = computed(() => {
    return route.path;
});

defineExpose({
    collapsechange,
    isCollapse,
});
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo {
    min-height: 100vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 280px;
    min-height: 100vh;
}
</style>
